﻿<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title></title>
			<script src="js/base.js"></script>
			<script type="text/javascript">
				function send(){
					var content = document.getElementById("username").value;
					//长度5-20
					if( !(content.length>=5 && content.length<=20) ){
						alert("用户名长度不合要求！");
						return;
					}
					//不能以数字开头
					if( isANum(content.charAt(0)) ){
						alert("数字不能开头");
						return;
					}
					//只能包含数字字母下划线
					for(var i=0; i<content.length; i++){
						var asc = content.charCodeAt(i);
						if( !(asc>=48&&asc<=57 || asc==95 || asc>=65&&asc<=90 || asc>=97&&asc<=122) ){
							alert("只能包含数字字母下划线！");
							return;
						}
					}
				}
				
			</script>
     </head>
     <style type="text/css">
          *{
              padding: 0; margin: 0;
          }
          #edit {
              margin: 0 auto;
              width: 1000px;
              text-align: center;
              overflow: hidden;
          }
          #commentlist {
              margin: 0 auto;
              width: 1000px;
          }
          #commentlist .comment{
              width: 800px;
              min-height: 80px;
              margin: 20px auto;
              background: darkkhaki;
              border-radius: 3px;
              position: relative;
              overflow: hidden;
          }
          #commentlist .comment p{
              margin: 10px 10px;
          }
          #sendBtn {
              display: block;
              margin: 10px auto;
              width: 100px;
              height : 30px;
              line-height: 30px;
              background: linear-gradient(to bottom, #faa, #f40);
              box-shadow: 0 0 2px #000;
              border-radius: 4px;
          }

          #sendBtn:hover{
              cursor: pointer;
              background: linear-gradient(to bottom, #fee, #f40);
          }
     </style>
     <body>
          <div id="edit">
				<p>请输入你的姓名:</p>
				<p>
					<input type="text" id="username"/>
					<span>用户名只能使用数字字母下划线，并且数字不能开头，并且长度5-20</span>
				</p>
				<p>请输入你的发言:</p>
				<p>
					<textarea name="" rows="5" cols="60"></textarea>
				</p>
				<p><a class="send" onclick="send()" id="sendBtn">发送</a></p>
          </div>
          <div id="commentlist">
              <div class="comment">
                   <p>张三疯:</p>
                   <p style="word-break: break-all;">
                   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                   </p>
                   <p style="text-align: right;">2016/9/4 16:06</p>
              </div>
              <div class="comment">
                   <p>张三疯:</p>
                   <p style="word-break: break-all;">
                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                   </p>
                   <p style="text-align: right;">2016/9/4 16:06</p>
              </div>
              <div class="comment">
                   <p>张三疯:</p>
                   <p style="word-break: break-all;">
                   xxxxxxxxxxxxxxxxxxxxxx
                   </p>
                   <p style="text-align: right;">2016/9/4 16:06</p>
              </div>
          </div>
     </body>
</html>
